<script setup lang="tsx">
import { type PlusColumn, PlusDescriptions } from "plus-pro-components";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import AddFill from "@iconify-icons/ep/plus";
import Delete from "@iconify-icons/ep/delete";
import { ref, watch } from "vue";
import Empty from "./utils/empty.svg?component";
const prop = defineProps({
  info: {
    default: () => []
  },
  formArr: {
    default: {
      deliveryDate: "",
      principal: "",
      phone: "",
      remarks: "",
      orderType: 1,
      vehicleList: []
    }
  }
});

const formArr = ref(prop.formArr);
//存货单详情
const columns: PlusColumn[] = [
  {
    label: "订单编号",
    prop: "orderNum",
    valueType: "copy"
  },
  {
    label: "发货企业",
    prop: "corp.name"
  },
  {
    label: "发货负责人",
    prop: "principal"
  },
  {
    label: "发货负责人电话",
    prop: "phone"
  },
  {
    label: "提货类型",
    prop: "orderTypeData"
  },
  {
    label: "提货单日期",
    prop: "deliveryDateData"
  },
  {
    label: "提货负责人",
    prop: "principalData"
  },
  {
    label: "提货负责人电话",
    prop: "phoneData"
  },
  {
    label: "提货备注",
    prop: "remarksData"
  },
  {
    label: "货物信息",
    prop: "orderGoods",
    width: 200
  },
  {
    label: "添加车辆",
    prop: "vehicle",
    width: 200
  }
];
//商品列表
const goodsColumns: TableColumnList = [
  {
    label: "货物名称",
    prop: "goodsName"
  },
  {
    label: "货物编号",
    prop: "goodsNo"
  }
];
const timeLineArr = ref([]);
//车辆表格
import { useVehicleColumns } from "./utils/vehicleColumns";
const { vehicleColumns, vehicleList, vehicleOnAdd, vehicleOnDel, selectValue } =
  useVehicleColumns(timeLineArr);
//车辆选择
import { useVehicleSelectColumns } from "./utils/selectVehicleColumns";

const vehicleSelectRef = ref();
const {
  vehicleSelectColumns,
  vehicleSelectPagination,
  vehicleSelectDataList,
  vehicleSelectRowStyle,
  vehicleSelectOnRowClick
} = useVehicleSelectColumns(
  vehicleSelectRef,
  selectValue.value,
  vehicleList.value
);

watch(
  () => vehicleList.value,
  newValue => {
    formArr.value.vehicleList = newValue;
  },
  { deep: true, immediate: true }
);
const orderTypeOptions = [
  {
    value: 1,
    label: "正常提货"
  },
  {
    value: 2,
    label: "异常退回"
  }
];
import { getCarTimeLineApi } from "@/api/carApi";
import { message } from "@/utils/message";
function getTimeLine(date) {
  getCarTimeLineApi({ date: date })
    .then(res => {
      timeLineArr.value = res.result;
    })
    .catch(error => {
      message(error.response.data.msg ?? "操作失败,请联系管理员", {
        type: "error"
      });
    });
}
const disabledDate = (time: Date) => {
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  return today > time;
};
</script>

<template>
  <div>
    <PlusDescriptions
      title="生成提货单"
      :column="2"
      :columns="columns"
      :data="prop.info[0]"
    >
      <template #plus-desc-orderGoods="{ value }">
        <pure-table :data="value" :columns="goodsColumns" />
      </template>
      <template #plus-desc-vehicle>
        <pure-table
          row-key="did"
          align-whole="center"
          :header-cell-style="{
            background: 'var(--el-fill-color-light)',
            color: 'var(--el-text-color-primary)'
          }"
          :data="vehicleList"
          :columns="vehicleColumns"
        >
          <template #empty>
            <Empty fill="var(--el-svg-monochrome-grey)" class="m-auto" />
          </template>
          <template #append>
            <el-button
              plain
              class="w-full my-2"
              :icon="useRenderIcon(AddFill)"
              @click="vehicleOnAdd"
            >
              添加一行数据
            </el-button>
          </template>
          <template #vehicle="scope">
            <el-select
              ref="vehicleSelectRef"
              v-model="selectValue[scope.row.did - 1].vehicleSelectValue"
              placeholder="请选择"
              value-key="id"
              clearable
            >
              <template #empty>
                <div class="m-4">
                  <pure-table
                    row-key="id"
                    alignWhole="center"
                    :header-cell-style="{
                      background: 'var(--el-fill-color-light)',
                      color: 'var(--el-text-color-primary)'
                    }"
                    :row-style="vehicleSelectRowStyle"
                    :pagination="vehicleSelectPagination"
                    :data="vehicleSelectDataList"
                    :columns="vehicleSelectColumns"
                    @row-click="
                      (row, column, event) => {
                        vehicleSelectOnRowClick(
                          row,
                          column,
                          event,
                          scope.row.did
                        );
                      }
                    "
                  />
                </div>
              </template>
            </el-select>
          </template>
          <template #operation="{ row }">
            <el-button
              class="reset-margin"
              link
              type="primary"
              :icon="useRenderIcon(Delete)"
              @click="vehicleOnDel(row)"
            />
          </template>
        </pure-table>
      </template>
      <template #plus-desc-orderTypeData>
        <el-select
          v-model="formArr.orderType"
          placeholder="请选择提货类型"
          class="w-full"
          clearable
          :disabled="true"
        >
          <el-option
            v-for="(item, index) in orderTypeOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </template>
      <template #plus-desc-deliveryDateData>
        <el-date-picker
          v-model="formArr.deliveryDate"
          type="date"
          placeholder="选择提货日期"
          class="!w-[200px]"
          value-format="YYYY-MM-DD"
          :disabled-date="disabledDate"
          @change="getTimeLine(formArr.deliveryDate)"
        />
      </template>
      <template #plus-desc-principalData>
        <el-input
          v-model="formArr.principal"
          clearable
          class="!w-[200px]"
          placeholder="请输入负责人"
        />
      </template>
      <template #plus-desc-phoneData>
        <el-input
          v-model="formArr.phone"
          clearable
          class="!w-[200px]"
          placeholder="请输入手机号"
        />
      </template>
      <template #plus-desc-remarksData>
        <el-input
          v-model="formArr.remarks"
          placeholder="备注"
          class="!w-[200px]"
          type="textarea"
        />
      </template>
    </PlusDescriptions>
  </div>
</template>
<style scoped></style>
